<template>
    <div class="umrp-number-box">
        <button @click="decrement">-</button>
        <input type="text" v-model.number="currentValue" />
        <button @click="increment">+</button>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// Props
const props = defineProps({
    value: {
        type: [Number, String],
        default: 0
    },
    min: {
        type: Number,
        default: -Infinity
    },
    max: {
        type: Number,
        default: Infinity
    },
    step: {
        type: Number,
        default: 1
    }
});

// Emit
const emit = defineEmits(['input']);

// Data
const currentValue = ref(props.value);

// Watch props.value to update currentValue
watch(
    () => props.value,
    (newValue) => {
        currentValue.value = newValue;
    }
);

// Watch currentValue to emit input event
watch(
    () => currentValue.value,
    (newValue, oldValue) => {
        if (newValue !== oldValue) {
            emit('input', newValue);
        }
    }
);

// Methods
function increment() {
    if (currentValue.value < props.max) {
        currentValue.value += props.step;
    }
}

function decrement() {
    if (currentValue.value > props.min) {
        currentValue.value -= props.step;
    }
}
</script>

<style scoped>
.umrp-number-box {
    display: flex;
    align-items: center;
}

button {
    padding: 4px 8px;
    cursor: pointer;
}

input {
    width: 50px;
    text-align: center;
    margin: 0 4px;
}
</style>